<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-02-07 10:23:50
 * @LastEditTime: 2022-03-04 08:55:31
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="layout">
    <div class="tab-wrap">
      <slot name="tab_layout"></slot>
      <div v-if="isHaveBtn">
        <slot name="btn_layout"></slot>
      </div>
    </div>
    <div class="list-container">
      <slot name="table_layout"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isHaveBtn: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="less">
#layout {
  height: 100%;
  .list-container {
    height: calc(100% - 116px);
    padding: 16px 16px 40px 16px;
  }
  .sc,
  .ty {
    color: #ff3d3d;
  }
  .add {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 114px;
  }
  .tab-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #ebebeb;
    .tab_nav {
      /deep/ .el-tabs__nav-wrap::after {
        height: 0;
      }
      /deep/ .el-tabs__item {
        height: 60px;
        line-height: 60px;
      }
      /deep/ .el-tabs__header {
        margin: 0;
      }
    }
  }
}
</style>
